<template>
  <div class="box">
    <div class="box_title flex">
      <div class="box_title_lf flex" @click="streetClick">
        <div class="title_time_lf">
          <i class="icon iconfont icon-shequguanli" style="color:red;"></i>
        </div>
        <div class="title_time_lc overflowEllipsis">
          {{Query.name}}
        </div>
        <div class="title_time_lr">
          <i class="icon iconfont icon-fanhui-copy"></i>
        </div>
      </div>
    </div>
    <div class="box_main_bd">
      <div class="box_main_echarts">
        <div id="main_map">

        </div>
      </div>
      <div class="box_main_list">
        <ul class="box_main_listUl">
          <li class="box_main_list_item flex" v-for="(e,i) in yLists" :key="i">
            <div :style="{'background-color': e.color}" class="box_main_list_item_type"></div>
            <div class="box_main_list_item_txt">{{e.name}} {{e.value}}个</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  let echarts = require("echarts");
  import taskApi from "../../requestApi/taskApi";
  import dateModel from "../../components/Module/dateModel";
  import {
    Toast
  } from "mint-ui";
  export default {
    components: {
      dateModel
    },
    data() {
      return {
        Query: {
          name: "请选择",
          id: '',
          type: ''
        },
        // 日期
        timeIndex: 1,
        dataStateVal: false,
        timeVal: "请选择",
        xLists: [
          "#FE6E39",
          "#F6991B",
          "#639FC9",
          "#C5DB49",
          "#DF87CF",
          "#EF8484",
          "#88CFC7",
          "#18CFC7"
        ],
        yLists: [{
            value: 0,
            name: "农村党组织",
            id: "COUNTRYSIDE",
            color: "#FE6E39"
          },
          {
            value: 0,
            name: "社区党组织",
            id: "OFFICE",
            color: "#F6991B"
          },
          {
            value: 0,
            name: "机关党组织",
            id: "COMMUNITY",
            color: "#639FC9"
          },
          {
            value: 0,
            name: "国企党组织",
            id: "ENTERPRISES",
            color: "#C5DB49"
          },
          {
            value: 0,
            name: "学校党组织",
            id: "SCHOOL",
            color: "#DF87CF"
          },
          {
            value: 0,
            name: "新社会党组织",
            id: "SOCIETY",
            color: "#EF8484"
          },
          {
            value: 0,
            name: "非公有制党组织",
            id: "NONPUBLICOWNERSHIP",
            color: "#EF8484"
          },
          {
            value: 0,
            name: "其他党组织",
            id: "OTHER",
            color: "#88CFC7"
          }
        ]
      };
    },
    created: function () {},
    mounted() {
      let self = this;
      self.baseUserMessageDistributeFun();
      window.getAppgetUserToken = function (val) {
        self.baseUserInfoFun(val);
        self.listFun();
      };
      this.titleFun({
        title: "统计"
      });
    },
    methods: {
      // * type 0:只显示宝塔区 1：只显示街道 2：只显示社区 3：只显示网格
      //  * chooseType  0：只能选择宝塔区 1只能选择街道  2.只能选择社区 3.只能选择网格
      streetClick(index) {
        let self = this;
        let obj = {
          type: 10,
          chooseType: 10
        };
        self.baseUserchooseOrgFun(JSON.stringify(obj), "getStreetClick");
        window.getStreetClick = function (val) {
          let obj = self.basechooseOrgInfoFun(val);
          self.Query.id = obj.orgId;
          self.Query.type = obj.orgType;
          self.Query.name = obj.orgName;
          self.listFun();
        };
      },
      mapListsFun() {
        let self = this;
        let eComVisitChart = echarts.init(document.getElementById("main_map"));
        eComVisitChart.setOption({
          series: [{
            silent: true,
            type: "pie",
            radius: 120,
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "inner",
                textStyle: {
                  fontWeight: 100,
                  fontSize: 12
                },
                formatter: "{d}%"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            color: self.xLists,
            data: self.yLists
          }]
        });
      },
      async listFun() {
        let self = this;
        let params = {
          url: `id=${self.Query.id}&type=${self.Query.type}`
        };
        console.log(params.url)
        let res = await taskApi.GetApistatisticspartyorgmemberstatistics(params);
        if (res.statusCode == 200) {
          if (res.data) {
            let data = res.data;
            self.yLists.forEach(e => {
              for (let k in data) {
                if (e.id == k) {
                  e.value = data[k];
                }
              }
            });
          } else {
            self.yLists = [{
                value: 0,
                name: "农村党组织",
                id: "COUNTRYSIDE",
                color: "#FE6E39"
              },
              {
                value: 0,
                name: "社区党组织",
                id: "OFFICE",
                color: "#F6991B"
              },
              {
                value: 0,
                name: "机关党组织",
                id: "COMMUNITY",
                color: "#639FC9"
              },
              {
                value: 0,
                name: "国企党组织",
                id: "ENTERPRISES",
                color: "#C5DB49"
              },
              {
                value: 0,
                name: "学校党组织",
                id: "SCHOOL",
                color: "#DF87CF"
              },
              {
                value: 0,
                name: "新社会组织党组织",
                id: "SOCIETY",
                color: "#EF8484"
              },
              {
                value: 0,
                name: "非公有制企业党组织",
                id: "NONPUBLICOWNERSHIP",
                color: "#EF8484"
              },
              {
                value: 0,
                name: "其他组织党组织",
                id: "OTHER",
                color: "#88CFC7"
              }
            ];
          }

          this.mapListsFun();
        } else {
          this.mapListsFun();
        }
      }
    },
    filters: {},
    watch: {},
    computed: {}
  };

</script>
<style scoped>
  /* 时间筛选 */
  .title_time_lc {
    width: calc(100% - 2.4rem);
    margin-left: 0.2667rem;
    margin-right: 0.2667rem;
    height: 0.72rem;
    line-height: 0.72rem;
    font-size: 0.4rem;
    font-family: PingFang-SC-Medium;
    font-weight: 600;
    color: #000;
  }

  .title_time_lf,
  .title_time_lr {
    width: 0.9333rem;
    height: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .title_time_lf i,
  .title_time_lr i {
    color: #8c96a6;
    font-size: 0.3467rem;
  }

  .box_title_lf {
    width: calc(100% - 0.96rem);
    margin-left: 0.48rem;
    height: 0.72rem;
    border-radius: 0.0533rem;
    margin-left: 0.7733rem;
    margin-top: 0.32rem;
  }

  .box_title_lr::after {
    position: absolute;
    left: -0.5867rem;
    width: 0.3467rem;
    height: 0.0267rem;
    background: rgba(235, 46, 51, 1);
    top: 0.2933rem;
    content: "";
  }

  .box_title_lr {
    width: 3.8133rem;
    height: 0.72rem;
    background: rgba(248, 248, 248, 1);
    border-radius: 0.0533rem;
    margin-left: 0.88rem;
    margin-top: 0.32rem;
    position: relative;
  }

  .box_title {
    width: 100%;
    height: 1.3333rem;
    background: rgba(255, 255, 255, 1);
    margin-top: 0.1867rem;
  }

  /* 时间筛选 */
  .box_main_list_item_type {
    width: 0.2133rem;
    height: 0.2133rem;
    background: rgba(254, 110, 57, 1);
    border-radius: 50%;
    margin-top: 0.08rem;
    margin-right: 0.32rem;
  }

  .box_main_list_item_txt {
    font-size: 0.3733rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(82, 99, 111, 1);
  }

  .box_main_list_item {
    width: 4rem;
    height: 0.4rem;
    margin-left: 0.4rem;
    line-height: 0.4rem;
    font-size: 0.3733rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(82, 99, 111, 1);
  }

  .box_main_list_item:nth-child(2),
  .box_main_list_item:nth-child(4),
  .box_main_list_item:nth-child(6),
  .box_main_list_item:nth-child(8) {
    margin-left: 1.3333rem;
  }

  .box_main_list_item:nth-child(3),
  .box_main_list_item:nth-child(4),
  .box_main_list_item:nth-child(5),
  .box_main_list_item:nth-child(6),
  .box_main_list_item:nth-child(7),
  .box_main_list_item:nth-child(8),
  .box_main_list_item:nth-child(9) {
    margin-top: 0.4rem;
  }

  .box_main_listUl {
    display: flex;
    flex-wrap: wrap;
  }

  .box_main_list {
    min-height: 1.2rem;
    width: 100%;
    margin-top: 0.1333rem;
  }

  /* 图表 */

  #main_map {
    width: 242px;
    height: 242px;
    overflow: hidden;
    position: absolute;
    top: 48px;
    left: calc(50vw - 121px);
  }

  .main_map_copy {
    width: 242px;
    height: 242px;
    overflow: hidden;
    position: absolute;
    top: 48px;
    left: calc(50vw - 121px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .box_main_echarts {
    width: 100%;
    height: 325px;
    overflow: hidden;
    position: relative;
  }

  /* 图表 */
  .box_main_bd {
    width: 100%;
    height: calc(100vh - 1.7333rem);
    background: rgba(255, 255, 255, 1);
    margin-top: 0.1867rem;
    overflow: hidden;
  }

  .box {
    background: #f6f6f6;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
  }

</style>
